<template>
	<view class="content">
		<view class="my">
			<view class="my_top">
				<image src="../../static/YunCangImg/14@2x.png"></image>
				<view class="portrait">
					<image src="../../static/YunCangImg/id-2.png"></image>
					<view>薇娅</view>
				</view>
			</view>
			<view class="my_bottom">
				<view class="myType">
					<view>
						<image src="../../static/YunCangImg/6@2x.png"></image>
						<text>个人展示信息</text>
					</view>
					<image @click="personal()" src="../../static/YunCangImg/back.png"></image>
				</view>
				<view class="myType">
					<view>
						<image src="../../static/YunCangImg/2@2x.png"></image>
						<text>我的会务预约</text>
					</view>
					<image @click="MeetingBooking()" src="../../static/YunCangImg/back.png"></image>
				</view>
				<view class="myType">
					<view>
						<image src="../../static/YunCangImg/4@2x.png"></image>
						<text>我的展架预约</text>
					</view>
					<image @click="Display()" src="../../static/YunCangImg/back.png"></image>
				</view>
				<view class="myType">
					<view>
						<image src="../../static/YunCangImg/4拷贝@2x.png"></image>
						<text>预约信息</text>
					</view>
					<image src="../../static/YunCangImg/back.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello'
		};
	},
	onLoad() {},
	methods: {
		personal(){
			uni.navigateTo({
				url:"./personal/personal"
			})
		},
		MeetingBooking(){
			uni.navigateTo({
				url:"./MeetingBooking/MeetingBooking"
			})
		},
		Display(){
			uni.navigateTo({
				url:"./DisplayRack/DisplayRack"
			})
		},
	}
};
</script>

<style lang="scss">
.content {
	.my {
		.my_top {
			position: relative;
			left: 0;
			top: 0;
			image {
				width: 470px;
				height: 300px;
				position: relative;
				left: -66px;
				top: -47%;
				z-index: -1;
			}
			.portrait {
				position: absolute;
				    top: 72px;
				    left: 86px;
				display: flex;
				align-items: center;
				image {
					width: 120upx;
					height: 120upx;
					align-items: center;
					border-radius: 50%;
					border: 1px solid #007aff;
				}
			}
		}
		.my_bottom {
			       position: relative;
			       top: -140px;
			.myType {
				width: 660upx;
				height: 140upx;
				background: #ffffff;
				box-shadow: 0px 5px 30px 0px rgba(204, 204, 204, 0.32);
				border-radius: 12px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin:20upx auto;
				padding: 0 10px;
				uni-image {
					width: 44upx;
					height: 44upx;
					align-items: center;
				}
				uni-view {
					display: flex;
					align-items: center;
					 image {
						width: 64upx;
						height: 64upx;
						align-items: center;
					}
					uni-text{
					    font-size: 28upx;
					    font-family: Microsoft YaHei UI;
					    font-weight: 400;
					    color: #333333;
						margin-left: 20upx;
					}
				}
			}
		}
	}
}
</style>
